<template>
  <!-- 导航列表 -->
  <ul class="nav-list">
    <!-- 这里的 key应该用 path作为参数更好 -->
    <li
      class="nav-item"
      v-for="item in navList"
      :key="item.title"
      @click="skip(item.path)">
      <i :class="`iconfont ${item.icon}`"></i>
      <span>{{item.title}}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'RightNav',
  data() {
    return {
      // 导航信息数组
      navList: [
        {
          icon: 'icon-rmb', // 字体图标
          title: '会员缴费', // 导航标题
          path: '', // 路由路径
        },
        {
          icon: 'icon-Customermanagement',
          title: '推荐会员',
          path: '',
        },
        {
          icon: 'icon-writing',
          title: '投稿',
          path: '',
        },
        {
          icon: 'icon-search',
          title: '奖励查询',
          path: '',
        },
        {
          icon: 'icon-category',
          title: '推荐会议/期刊目录',
          path: '',
        },
        {
          icon: 'icon-add-account',
          title: '加入兄弟学会',
          path: '',
        },
      ],
    }
  },
  methods: {
    // 路由跳转
    skip (path) {
      console.log(path+"未写路由模块，暂时跳转不了")
      // this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
.nav-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 443px;
  margin-top: 58px;

  .nav-item {
    width: 100%;
    line-height: 68px;
    background-color: #4474e2;
    color: #fff;
    padding-left: 50px;
    cursor: pointer;
    &:hover {
      box-shadow: 0 0 6px rgba(0, 0, 0, .7);
    }

    i {
      font-size: 40px;
      vertical-align: -8px; // 设置字体图标和字体垂直居中
      margin-right: 20px;
    }

    span {
      font-size: 18px;
      font-weight: bold;
    }
  }
}
</style>